<template>
  <div class="quick-actions">
    <el-button class="action-btn" @click="showCourseTypeDialog = true">
      <i class="fas fa-video" aria-hidden="true"></i>
      <span>开始上课</span>
    </el-button>
    <el-button class="action-btn" @click="lookStudentPort">
      <i class="fa-solid fa-user" aria-hidden="true"></i>
      <span>学员端</span>
      <!-- 新增的上新功能徽标 -->
      <span class="new-badge">抢先体验</span>
    </el-button>
    <el-button class="action-btn" @click="addToWe">
      <i class="fa-solid fa-comment-sms" aria-hidden="true"></i>
      <span>一手消息</span>
      <span class="new-badge">邀您入群</span>
    </el-button>
    <el-button class="action-btn" @click="handleVocabTest">
      <i class="fa-solid fa-dumbbell" aria-hidden="true"></i>
      <span>词汇量测试</span>
    </el-button>
    <el-button class="action-btn" @click="systemHelpWord">
      <i class="fa-solid fa-person-chalkboard" aria-hidden="true"></i>
      <span>系统文档</span>
      <!-- 新增的上新功能徽标 -->
      <span class="new-badge">使用教程</span>
    </el-button>
    <!--    <el-button class="action-btn" @click="handleAction('uploadMaterials')">
          <i class="fas fa-file-upload" aria-hidden="true"></i>
          <span>上传课件</span>
        </el-button>
        <el-button class="action-btn" @click="handleAction('assignHomework')">
          <i class="fas fa-file-alt" aria-hidden="true"></i>
          <span>发布作业</span>
        </el-button>
        <el-button class="action-btn" @click="handleAction('publishNotice')">
          <i class="fas fa-bullhorn" aria-hidden="true"></i>
          <span>发公告</span>
        </el-button>
        <el-button class="action-btn" @click="handleAction('aiRecommend')">
          <i class="fas fa-robot" aria-hidden="true"></i>
          <span>AI助教推荐练习题</span>
        </el-button>-->

    <!-- 引入课程类型选择弹窗组件 -->
    <CourseTypeDialog
      :visible="showCourseTypeDialog"
      @close="showCourseTypeDialog = false"
      @selectWordCourse="handleWordCourseSelection"
    />

    <!-- 引入授课模式选择弹窗组件 -->
    <TeachingModeDialog
      :visible="showTeachingModeDialog"
      :course-type="courseType"
      @close="showTeachingModeDialog = false"
    />
  </div>
</template>

<script>
import CourseTypeDialog from '@/views/course/component/courseTeach/CourseTypeDialog.vue'
import TeachingModeDialog from '@/views/course/component/courseTeach/TeachingModeDialog.vue'

export default {
  name: 'QuickActions',
  components: {
    CourseTypeDialog,
    TeachingModeDialog
  },
  data() {
    return {
      // 弹窗显示控制
      showCourseTypeDialog: false,
      showTeachingModeDialog: false,
      courseType: ''
    }
  },
  methods: {
    // 处理词汇量测试按钮点击
    handleVocabTest() {
      this.$router.push('/vocabularyTestHome')
    },

    lookStudentPort() {
      window.open('https://www.yuque.com/liujijiself/ams119/vpgv8o26gxhcwbrf?singleDoc# 《学员端使用教程》')
    },
    systemHelpWord() {
      window.open('https://www.yuque.com/liujijiself/ams119/kaf3c0s3vevbw7cq?singleDoc# 《使用教程》')
    },
    addToWe() {
      window.open('https://www.yuque.com/liujijiself/ams119/gmnuhvxvt0n1lsy5?singleDoc# 《团结起来》')
    },

    // 处理其他操作
    handleAction(action) {
      switch (action) {
        case 'uploadMaterials':
          this.$notify.info('打开课件上传界面...')
          break
        case 'assignHomework':
          this.$notify.info('打开发布作业界面...')
          break
        case 'publishNotice':
          this.$notify.info('打开发布公告界面...')
          break
        case 'aiRecommend':
          this.$notify.info('正在获取AI推荐练习题...')
          break
      }
    },

    // 处理单词课程选择
    handleWordCourseSelection(courseName) {
      if (courseName === '词汇') {
        this.showCourseTypeDialog = false
        this.showTeachingModeDialog = true
        this.courseType = courseName
      } else if (courseName === '阅读') {
        this.$router.push('/raedTrain')
      } else {
        this.$notify.success(`${courseName} 课程敬请期待`)
      }
    }
  }
}
</script>

<style scoped>
.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 15px 20px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(8, 8, 8, 0.15);
  width: 100%;
  box-sizing: border-box;
}

.action-btn {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 8px;
  background-color: #f8f9fa;
  color: #333;
  border: none;
  transition: all 0.2s;
}

.action-btn:hover {
  background-color: #e9ecef;
  color: #0084ff;
}

.action-btn i {
  margin-right: 8px;
  font-size: 16px;
}

.action-btn span {
  font-size: 14px;
}

/* 上新功能徽标样式 - 右上角小尺寸版本 */
.new-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  padding: 1px 4px;
  font-size: 10px;
  color: #fff;
  background-color: #ff4d4f;
  border-radius: 3px;
  line-height: 1;
  animation: float 2s ease-in-out infinite;
}

/* 浮动动画效果 */
@keyframes float {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-3px) scale(1.1);
  }
}

/* 按钮样式调整 */
.action-btn {
  position: relative; /* 关键：让徽标的absolute定位基于按钮 */
  padding: 10px 20px; /* 恢复原有内边距 */
  /* 保持其他原有样式 */
}
</style>
